<template>
  <div class="main_container bs_bdb">
    <div class="main_inner flex h100">
      <div class="left bs_bdb side h100">
        <div class="left_up_out">
          <div class="left_up">
            <div class="left_up_left">
              <div class="img_box bd_radio">
                <img
                  class="bd_radio"
                  :src="store.profile.user?.headimgurl"
                  alt=""
                />
              </div>
              <div class="info">
                <div class="name fff">{{ store.profile.user?.nickname }}</div>
                <div class="id">{{ store.profile.user?.id }}</div>
              </div>
            </div>

            <div class="left_up_right">
              <div class="sorts cur_poi">
                <div class="img_box">
                  <img src="../assets/crown.png" alt="" />
                </div>
                <span class="fff sort_name" @click="handleContribution"
                  >贡献榜</span
                >
              </div>
              <div class="sorts cur_poi">
                <div class="img_box">
                  <img src="../assets/pk.png" alt="" />
                </div>
                <span class="fff sort_name" @click="handleUnName">无名次</span>
              </div>
            </div>
          </div>
          <div class="micro fs_14 bs_bdb">
            <div
              v-if="switchTyp"
              class="btn cur_poi bs_bdb fff"
              @click="handleMike()"
            >
              上麦
            </div>
            <div v-else class="flex_row">
              <div @click="handleMute" class="btn cur_poi bs_bdb fff">
                {{ openOffMike ? "开麦" : "闭麦" }}
              </div>
              <div class="btn cur_poi bs_bdb fff" @click="closeRoomLive">
                下麦
              </div>
            </div>
          </div>
        </div>
        <div class="left_down">
          <div class="lists curs_poin">
            <div
              @click="handleAudienceType(item)"
              :class="{ active_tab: audienceTyp === item.id }"
              class="item"
              v-for="item in audienceTabs"
              :key="item.id"
            >
              <div>{{ item.label }}</div>
            </div>
            <div class="item">
              <img
                src="../assets//arr_down.png"
                style="width: 16px; height: 16px"
                alt=""
              />
            </div>
          </div>
          <div class="overflow_box bs_bdb">
            <div
              id="left_item"
              class="cur_poi item_content flex_row"
              v-for="(item, uuid, kindInd) in mapperKind"
              :key="kindInd"
              :ref="(el) => (elementList[uuid] = el)"
              @contextmenu="($event) => showMenu($event, uuid, item)"
            >
              <div class="avatar">
                <img :src="item?.avatar" alt="" />
                <img
                  v-if="item.userinfo.is_mute"
                  class="muted_avatar"
                  src="../assets/muted.png"
                  alt=""
                />
              </div>
              <div class="info flex_colm bs_bdb fff">
                <div class="fs_16">{{ item.name }}</div>
                <div class="icons_sort flex_row">
                  <img
                    style="height: 17px; margin-right: 10px"
                    :src="
                      store.getRichLevel({
                        val: item.userinfo.giftcoin,
                        ty: 'rich',
                      }).url
                    "
                    alt=""
                  />

                  <img
                    style="height: 20px"
                    :src="
                      store.getRichLevel({
                        val: item.userinfo.giftcoin,
                        ty: 'charm',
                      }).url
                    "
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="testVideo" style="position: absolute; left: 0; top: 50px">
        <video id="preview"></video>
      </div>

      <div class="midd h100">
        <div class="mind_up">
          <div
            class="player"
            :class="{ player_column: currentDevTyp === 1 }"
            v-if="isPlay"
          >
            <div
              class="flayer_box bs_bdb flayer_box2"
              v-if="Object.keys(playerList).length > 2"
            >
              <div class="common bs_bdb" id="local-player"></div>
              <div
                class="common bs_bdb"
                :id="'other-player' + key"
                v-for="(item, key) in playerList"
                :key="key"
              ></div>
            </div>
            <div class="flayer_box bs_bdb" v-else>
              <div
                class="me mylive"
                :class="[
                  { screen_row0: currentDevTyp === 0 },
                  { screen_colum1: currentDevTyp === 1 },
                ]"
                id="local-player"
              >
                <div
                  v-if="isShowSvg"
                  id="demoCanvas"
                  class="svga"
                  :src="svgaVal"
                ></div>
              </div>
              <div
                class="other bs_bdb"
                v-if="
                  Object.keys(playerList).length !== 0 &&
                  Object.keys(playerList).length < 3
                "
              >
                <div
                  name="other"
                  class="item bs_bdb"
                  :id="'other-player' + key"
                  v-for="(item, key) in playerList"
                  :key="key"
                ></div>
              </div>
            </div>

            <div class="closePlayer" @click="closeRoomLive">关闭直播</div>
          </div>

          <div class="mind_up_inner" v-else>
            <el-form>
              <div class="fff title">直播标题</div>
              <el-form-item>
                <el-input placeholder="请输入标题" v-model="liveForm.title" />
              </el-form-item>
              <div class="fff title">粉丝看到的开播提醒</div>
              <el-form-item>
                <el-input
                  placeholder="请输入开播提醒"
                  style="width: 330px"
                  v-model="liveForm.tip"
                  autocomplete="off"
                />
              </el-form-item>
              <div class="fff title">请选择开播设备</div>
              <el-form-item>
                <el-select
                  @change="changeSelect('video', $event)"
                  v-model="liveForm.deviceVedio"
                  placeholder="请选择装备类型"
                >
                  <el-option
                    :label="item.deviceName"
                    :value="item.deviceId"
                    v-for="item in deviceVedioList"
                    :key="item.deviceId"
                  />
                </el-select>
              </el-form-item>
              <div class="fff title">请选择麦克风</div>
              <el-form-item>
                <el-select
                  @change="changeSelect('video', $event)"
                  v-model="liveForm.deviceAudio"
                  placeholder="请选择麦克风类型"
                >
                  <el-option
                    :label="item.deviceName"
                    :value="item.deviceId"
                    v-for="item in deviceAudioList"
                    :key="item.deviceId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <div class="device_box">
                  <div
                    class="deviceTyp curs_poin fff"
                    :class="{ active_devi: currentDevTyp === 1 }"
                    @click="handlerDevice(1)"
                  >
                    <img src="../assets/column.png" alt="" />
                    <span>竖屏</span>
                  </div>
                  <div
                    class="deviceTyp curs_poin fff"
                    :class="{ active_devi: currentDevTyp === 0 }"
                    @click="handlerDevice(0)"
                  >
                    <img src="../assets/row.png" alt="" />
                    <span style="margin-left: 6px">横屏</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="startPlay fff" @click="startLocalLive">
                  开始直播
                </div>
                <!-- <div class="startPlay fff" @click="store.startLive = true">
                开始直播
              </div> -->
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="mind_down">
          <div class="random_box">
            <!-- <img src="../../public/logo.jpg" alt=""> -->
          </div>
          <div class="inner">
            <div class="tabs">
              <div
                @click="handleGiftScreenTab(item)"
                :class="{ active_tab: curreGiftScreen == item.id }"
                class="tabs_item"
                v-for="(item, i) in giftScreenTabs"
                :key="i"
              >
                {{ item.label }}
              </div>
            </div>
            <div class="out">
              <div class="content fff">
                <div
                  class="txt2 flex_colm fs_14"
                  v-if="isShowTxt2"
                  :class="[
                    { txt_act1: animateStatus2 === 1 },
                    { txt_act2: animateStatus2 === 2 },
                  ]"
                >
                  {{ txtVal2 }} 进来了
                </div>
                <div v-if="curreGiftScreen === 1 || curreGiftScreen === 3">
                  <div
                    class="txt"
                    v-if="isShowTxt"
                    :class="[
                      { txt_act1: animateStatus === 1 },
                      { txt_act2: animateStatus === 2 },
                    ]"
                  >
                    <span style="color: blue">{{
                      publishScreenGifts?.nickname
                    }}</span>
                    &nbsp;{{ txtVal.sender }}赠送给 &nbsp;
                    <span style="color: blue">
                      {{ txtVal.reciver }}
                    </span>
                    {{ txtVal.giftName }}x{{ txtVal.giftNum }}
                  </div>
                </div>
              </div>
              <div class="icons" v-if="isPlay">
                <div class="left_item">
                  <div
                    class="item"
                    v-for="icon in giftScreenLefIcons"
                    :key="icon.id"
                    @click="handleMiddIcon(icon.id)"
                  >
                    <img :src="icon.url" alt="" />
                  </div>
                </div>
                <div class="right_item">
                  <div
                    class="item"
                    v-for="icon in giftScreenRigIcons"
                    :key="icon.id"
                    @click="handleMiddIcon(icon.id)"
                  >
                    <img :src="icon.url" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right bs_bdb side h100">
        <div class="right_up fff">
          <div class="switch" :class="{ margin_btm: !isSwitch }">
            <div class="title">连麦列表</div>
            <el-switch v-model="isSwitch" />
          </div>
          <div v-if="isSwitch">
            <div class="tabs">
              <div
                @click="handleInteract(item)"
                class="item cur_poi"
                v-for="item in interactTabs"
                :key="item.id"
                :class="{ active_tab: interactionCurr === item.id }"
              >
                {{ item.label }}
              </div>
            </div>

            <div class="out_chat_text" v-if="interactionCurr === 1" style="">
              <div
                class="chat_text flex_bt fff"
                v-for="(item, i) in activeAudience"
                :key="i"
              >
                <div class="info flex_bt">
                  <div class="avator">
                    <img :src="item?.avatar" alt="" />
                  </div>
                  <div class="nickname">{{ item?.name }}</div>
                </div>
                <div class="btn cur_poi" @click="handleInvite(item)">邀请</div>
              </div>
              <img
                v-if="!Object.values(allAudienceKind).length"
                class="psi_fath_fit"
                src="../assets/null.png"
                alt=""
              />
            </div>

            <div class="out_chat_text" v-if="interactionCurr === 2">
              <div
                class="chat_text flex_bt fff"
                v-for="(item, i) in upMike"
                :key="item.uid"
              >
                <div class="info flex_bt">
                  <div class="avator">
                    <img :src="item.headimgurl" alt="" />
                  </div>
                  <div class="nickname">{{ item.nickname }}</div>
                </div>
                <div class="flex_row two_btn">
                  <div
                    class="btn reju cur_poi"
                    style="margin-right: 10px; background: #282c2f; color: #aaa"
                    @click="handleAskMike(item, 2, i)"
                  >
                    取消
                  </div>
                  <div class="btn cur_poi" @click="handleAskMike(item, 1, i)">
                    接通
                  </div>
                </div>
              </div>
              <img
                v-if="!upMike.length"
                class="psi_fath_fit"
                src="../assets/null.png"
                alt=""
              />
            </div>

            <div class="out_chat_text" v-if="interactionCurr === 3">
              <div
                class="chat_text flex_bt fff"
                v-for="(item, i) in manageMike"
                :key="item.uid"
              >
                <div class="info flex_bt">
                  <div class="avator">
                    <img :src="item.headimgurl" alt="" />
                  </div>
                  <div class="nickname">{{ item.nickname }}</div>
                </div>
                <div class="flex">
                  <img
                    src="../assets/mute.png"
                    style="width: 25px; height: 25px; margin-right: 10px"
                    alt=""
                  />
                  <div class="btn cur_poi" @click="handleTickManage(item, i)">
                    挂断
                  </div>
                </div>
              </div>
              <img
                class="psi_fath_fit"
                v-if="!manageMike.length"
                src="../assets/null.png"
                alt=""
              />
            </div>
          </div>
          <div
            id="msg_scroll"
            class="out_msg_bg bs_bdb"
            :class="{ out_msg_bg_h: !isSwitch }"
          >
            <div
              class="msg_bg flex_colm bs_bdb"
              v-for="i in publiScreeRecord"
              :key="i"
            >
              <div class="info fs_14">#</div>
              <div class="msg fs_14">
                <span style="color: #ebd64f"></span> {{ i }}
              </div>
            </div>
          </div>
        </div>
        <div class="right_down">
          <div class="img_box">
            <div class="imgs curs_poin" v-for="(item, i) in 3" :key="i">
              <img src="../assets/meme.png" alt="" />
            </div>
            <div class="text">500钻石1条，全站可见</div>
          </div>
          <el-input
            resize="none"
            v-model.trim="publicScreenMsg"
            :rows="5"
            type="textarea"
            placeholder="发送信息"
          />
          <!--  -->
          <div class="btn_box flex_row">
            <div class="btn fs_12 bs_bdb fff" @click="quickReply(1)">
              快捷回复
            </div>
            <div class="btn fs_12 bs_bdb fff" @click="toSendMsg">发送</div>
          </div>
        </div>
      </div>
    </div>
    <ConvenienceCpts />
    <contribuCptsVue v-if="store.isContrib" />
    <pkRoomCpts />
    <giftCpt />
    <profile />
    <chatCpt />
    <el-dialog v-model="isOpReport" title="举报" width="500" center>
      <div class="report-main flex">
        <el-form :model="reportForm" label-width="auto">
          <el-row>
            <el-col :span="24">
              <el-form-item label="">
                <el-input
                  :rows="2"
                  resize="none"
                  style="width: 100%"
                  v-model="reportForm.msg"
                  type="textarea"
                  placeholder=""
                  clearable
                />
              </el-form-item>
            </el-col>

            <el-col :span="24" class="flex">
              <el-form-item label="">
                <el-button @click="getReportMember" type="primary"
                  >提交举报</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog
      style="height: 250px; width: 250px; background: #ffffff"
      align-center
    >
      <div class="mian txt_cent">#</div>
      <template #footer>
        <div class="dialog-footer" style="margin: auto; text-align: center">
          <el-button @click="invitedDialog(2, store.inviteMsg.type)"
            >拒绝</el-button
          >
          <el-button @click="invitedDialog(1, store.inviteMsg.type)">
            同意
          </el-button>
        </div>
      </template>
    </el-dialog>
    <div class="playDialog" v-if="isPlayDialog">
      <img
        @click="closePlayDialog"
        class="clos_img cur_poi"
        src="../assets/close_head.png"
        alt=""
      />
      <div class="title_dial fff bs_bdb">开播选择</div>
      <div class="mind_up_inner">
        <el-form>
          <div class="fff title">请选择开播设备</div>
          <el-form-item>
            <el-select
              v-model="liveForm.deviceVedio"
              placeholder="请选择装备类型"
            >
              <el-option
                :label="item.label"
                :value="item.deviceId"
                v-for="item in deviceVedioList"
                :key="item.deviceId"
              />
            </el-select>
          </el-form-item>
          <div class="fff title">请选择麦克风</div>
          <el-form-item>
            <el-select
              v-model="liveForm.deviceAudio"
              placeholder="请选择麦克风类型"
            >
              <el-option
                :label="item.label"
                :value="item.deviceId"
                v-for="item in deviceAudioList"
                :key="item.deviceId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="device_box">
              <div
                class="deviceTyp curs_poin fff"
                :class="{ active_devi: currentDevTyp === 1 }"
                @click="handlerDevice(1)"
              >
                <img src="../assets/column.png" alt="" />
                <span>竖屏</span>
              </div>
              <div
                class="deviceTyp curs_poin fff"
                :class="{ active_devi: currentDevTyp === 0 }"
                @click="handlerDevice(0)"
              >
                <img src="../assets/row.png" alt="" />
                <span style="margin-left: 6px">横屏</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item style="justify-content: center; width: 100%">
            <div class="startPlay fff" @click="startLocalLive">开始直播</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import chatCpt from "./chatCpt.vue";
import profile from "./profile.vue";
import { CustomMouseMenu } from "@howdyjs/mouse-menu";
import contribuCptsVue from "./contribuCptsVue.vue";
import pkRoomCpts from "./pkRoomCpts.vue";
import giftCpt from "./giftCpt.vue";
import { ref, reactive, onMounted, nextTick, computed, watch } from "vue";
import ConvenienceCpts from "./ConvenienceCpts.vue";
import { useCounterStore } from "../store";
import SVGA from "svgaplayerweb";
import { create } from "danmu";
const { ipcRenderer } = require("electron");
import {
  reportMemberApi,
  getIsFollow,
  ticketOut,
  modifyRole,
  forbiddenTalk,
  forbiddenTalkBack,
  getuserinfo,
  profileMatchApi,
  loginYunXinApi,
  roomLiveApi,
  iMaccountApi,
  delCash,
  invitMikeApi,
  manageMikeApi,
  invitAudience,
  handlerLinkMikeApi,
  offMikeApi,
  reportMember,
  $TipMessage,
  msgByCookiApi,
  quickReplyListApi,
  getPaihang,
} from "../http";
let manager = null;
const isOpReport = ref(false);
const reportForm = ref({
  msg: "",
});
//
// const watchVolVal=
// const uidStr = ref([]);
const switchTyp = ref(true);
const isPlayDialog = ref(false);
// 变量
const manageMike = ref([]);
const otherVideos = ref({});
const taskId = ref("");
const pushUrl = ref("");
const pkRoomInfo = ref({});
const teamsInfo = ref({});

const playerList = ref({});
const audiencetypeMatch = ref(null);
const store = useCounterStore();
const publiScreeRecord = ref([]);
const publicScreenMsg = ref("");
const switchMicroTyp = ref(true);
const audienceTyp = ref(1);
const interactionCurr = ref(1);
const currentDevTyp = ref(0);

const isPlay = ref(false);
const liveForm = ref({
  title: "",
  tip: "",
  deviceAudio: "",
  deviceVedio: "",
});
const deviceAudioList = ref([]);
const deviceVedioList = ref([]);
const onlineAudiences = ref([]);
const richAudiences = ref([]);
const adminAudiences = ref([]);
const allAudienceKind = ref({});

const audienceTabs = ref([
  {
    label: "在线用户",
    id: 1,
  },
  {
    label: "贵族",
    id: 2,
  },
  {
    label: "管理",
    id: 3,
  },
]);
const interactTabs = ref([
  {
    label: "活跃用户",
    id: 1,
  },
  {
    label: "上麦申请",
    id: 2,
  },
  {
    label: "连麦管理",
    id: 3,
  },
]);

const isSwitch = ref(true);
const curreGiftScreen = ref(1);
const giftScreenTabs = ref([
  {
    id: 1,
    label: "全部",
  },
  {
    id: 2,
    label: "进房",
  },
  {
    id: 3,
    label: "幸运",
  },
]);
const giftScreenLefIcons = [
  {
    url: new URL("../assets/main_imgs/main_skin.png", import.meta.url).href,
    id: 1,
  },
  {
    url: new URL("../assets/main_imgs/main_beauty.png", import.meta.url).href,
    id: 2,
  },
  {
    url: new URL("../assets/main_imgs/l_main_liwu.png", import.meta.url).href,
    id: 3,
  },
  {
    url: new URL("../assets/main_imgs/main_car.png", import.meta.url).href,
    id: 4,
  },
  {
    url: new URL("../assets/main_imgs/main_renqi.png", import.meta.url).href,
    id: 5,
  },
];
const giftScreenRigIcons = [
  {
    url: new URL("../assets/main_imgs/main_active.png", import.meta.url).href,
    id: 6,
  },
  {
    url: new URL("../assets/main_imgs/main_star.png", import.meta.url).href,
    id: 7,
  },
  {
    url: new URL("../assets/main_imgs/main_funk.png", import.meta.url).href,
    id: 8,
  },
  {
    url: new URL("../assets/main_imgs/main_grop.png", import.meta.url).href,
    id: 9,
  },
  {
    url: new URL("../assets/main_imgs/main_pk.png", import.meta.url).href,
    id: 10,
  },
  {
    url: new URL("../assets/main_imgs/r_main_liwu.png", import.meta.url).href,
    id: 11,
  },
];
const receiveInfo = ref(null);

const activeAudience = computed(() => {
  return allAudienceKind.value;
});
const upMike = ref([]);

const handleAudienceType = (val) => {
  console.log("切换观众标签页-val", val);
  audienceTyp.value = val.id;
  handleMapperKind();
};
const handleInteract = (val) => {
  interactionCurr.value = val.id;
};
// 发送信息
// const toSendMsg = () => {
//   console.log("发送信息------------------>");
//   publicScreenMsg.value && publiScreeRecord.value.push(publicScreenMsg.value);
//   moveDanmu(publicScreenMsg.value);
//   for (const key in publishScreenTexts.value) {
//     publiScreeRecord.value.push(publishScreenTexts.value[key].text);
//   }
//   // 发送完清空
//   publicScreenMsg.value = "";
// };

const toSendMsg = (def = "") => {
  if (!publicScreenMsg.value && def) {
    publicScreenMsg.value = def;
  }
  console.log("发送信息------------------>");
  publicScreenMsg.value && publiScreeRecord.value.push(publicScreenMsg.value);
  moveDanmu(publicScreenMsg.value);
  for (const key in publishScreenTexts.value) {
    publiScreeRecord.value.push(publishScreenTexts.value[key].text);
  } // 发送完清空
  publicScreenMsg.value = "";
};

// 触发快捷回复
const quickReply = (e) => {
  if (e) {
    store.isQuickReply = true;
  } else {
    store.isQuickReply = false;
  }
  console.log("触发快捷回复", store.isQuickReply);
};
// 切换横屏竖屏显示
const handlerDevice = (cur) => {
  currentDevTyp.value = cur;
};
const changeSelect = (val, e) => {
  console.log("type:", val, "deviceId:", e);
  let mapper = {
    video: "camera",
    audio: "microphone",
  };
  store.roomContent.rtcController.switchDevice({
    type: mapper[val],
    deviceId: e,
  });
};
// 挂断连麦事件
const handleTickManage = (e, i) => {
  console.log("房间信息：", store.roomLiveInfo);
  console.log(i, "e", e);
  offMikeApi({
    roomid: store.roomLiveInfo.id,
    userid: e.id,
  }).then((res) => {
    console.log("res", res);
    if (res.data.errcode === 0) {
      manageMike.value.splice(i, 1);
    }
  });
};
// 获取直播设备
const getLiveDevices = async () => {
  try {
    // 开启权限
    // await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    // 获取直播设备视频
    let deviceRes = await store.roomContent.rtcController.enumCameraDevices();
    deviceVedioList.value = deviceRes.data;
    liveForm.value.deviceVedio = deviceVedioList.value[0].deviceId;
    // console.log(deviceVedioList.value, "deviceRes:", deviceRes);

    // 获取直播设备麦克风
    let deviceMicroRes =
      await store.roomContent.rtcController.enumRecordDevices();
    deviceAudioList.value = deviceMicroRes.data;
    liveForm.value.deviceAudio = deviceAudioList.value[0].deviceId;
    console.log(deviceAudioList.value, "deviceMicroRes:", deviceMicroRes);
  } catch (err) {
    console.log("获取设备失败err", err);
  }
};
// 加入rtc通道
const getJoinRtcChannel = async () => {
  const element = document.querySelector(".me");
  store.roomContent?.rtcController?.setupLocalVideoCanvas(element);
  // await store.roomContent.rtcController.joinRtcChannel();
};
// 推流
const pushStream = async () => {
  console.log("pushStream-into");
  let startLiveRes = await store.roomContent?.liveController?.startLive({
    title: "xxx",
    liveLayout: 1,
    password: "",
    userUuidList: [store.roomLiveInfo.uid],
    extensionConfig: "",
  });
  pushUrl.value = startLiveRes.data.pushUrl;
  taskId.value = startLiveRes.data.taskId;
  console.log("startLiveRes-pushStream", startLiveRes);
  store.roomLiveStreamInfo = startLiveRes;
};
const handleAskMike = (val, ty, i) => {
  console.log("val:::", val);
  console.log("ty:::", ty);
  let data = {
    roomid: store.roomLiveInfo.id,
    status: Number(ty),
    userid: Number(val.id ? val.id : val.uid),
  };
  console.log("data", data);
  handlerLinkMikeApi(data).then((res) => {
    console.log("处理连麦申请-res", res);
    // 成功后处理
    if (res.data.errcode === 0) {
      // 2拒绝1同意
      if (ty == 1) {
        manageMike.value.push(val);
        interactionCurr.value = 3;
      }
      upMike.value.splice(i, 1);
    }
  });
};
const openOffMike = ref(false);
const refreshManageMikeList = async () => {};
const handleMute = async () => {
  openOffMike.value = !openOffMike.value;
  if (!openOffMike.value) {
    await store.roomContent?.rtcController?.unmuteMyAudio();
  } else {
    await store.roomContent?.rtcController?.muteMyAudio();
  }
};
// 点击开直播
const startLocalLive = async () => {
  console.log("store.enroomInstance", store.enroomInstance);
  interactionCurr.value = 1;
  switchTyp.value = !switchTyp.value;
  isPlayDialog.value = false;
  try {
    // 初始化上麦列表。
    let mikeRes = await invitMikeApi({
      roomid: store.roomLiveInfo.id,
    });
    if (mikeRes.data.errcode === 0) {
      upMike.value = mikeRes.data.data.list;
      console.log("upMike.value1--------", upMike.value);
    }
    // 初始化连麦管理 manageMikeApi
    let mangeMikeRes = await manageMikeApi({
      roomid: store.roomLiveInfo.id,
    });
    manageMike.value = mangeMikeRes.data.data.list;
    console.log("连麦管理列表", manageMike.value);
  } catch (err) {
    console.log("右边操作-err", err);
  }

  await delCash();
  // 初始化弹幕
  initDanmu();
  watchPublicScreen();
  // 获取旧用户的数据
  getOnlineAudiences();
  isPlay.value = true;
  store.mittOb.emit("getIsPlay", true);

  nextTick(async () => {
    try {
      await getJoinRtcChannel();
      await store.roomContent?.rtcController?.unmuteMyVideo();
      if (!openOffMike.value) {
        await store.roomContent?.rtcController?.unmuteMyAudio();
      }
      store.roomContent?.rtcController?._rtc?.localStream?.setCaptureVolume(
        10 * store.mikeDefu,
        "microphone"
      );

      // todo
      //设置基础美颜参数并传递
      // let effects = {
      //   brightnessLevel: 1,
      //   rednessLevel: 0.9,
      //   smoothnessLevel: 0.1,
      // };
      // store.roomContent?.rtcController?._rtc.localStream.setBeautyEffect(true);
      // store.roomContent?.rtcController?._rtc.localStream.setBeautyEffectOptions(
      //   effects
      // );
      // store.roomContent?.rtcController?._rtc.localStream.setFilter("ziran", 1);
      // // 设置图片水印参数
      // let options = {
      //   mediaType: "screen",
      //   imageWatermarks: [
      //     {
      //       imageUrls: ["../assets/all_seat_bg.png"],
      //       loop: true,
      //     },
      //   ],
      // };
      // // 添加水印
      // store.roomContent?.rtcController?._rtc.localStream.setCanvasWatermarkConfigs(
      //   options
      // );

      // todo
      let vd = document.querySelector(".me video");
      let div = document.querySelector(".me>div");
      div.style.width = "100%";
      div.style.height = "100%";
      console.log("vd:::", vd);
      let arr = document.querySelector(".me").classList;
      console.log("arr", arr);
      if (arr.contains("screen_colum1")) {
        vd.style["object-fit"] = "cover";
        vd.style["width"] = "auto";
        vd.style["height"] = "100%";
        vd.style["aspect-ratio"] = " 9/16";
      }
      if (arr.contains("screen_row0")) {
        vd.style["object-fit"] = "cover";
        vd.style["width"] = "auto";
        vd.style["height"] = "100%";
        vd.style["aspect-ratio"] = " 16/9";
      }
      // await store.roomContent?.rtcController?.unmuteMyAudio();
      await pushStream();
      // 渲染
      renderDanmu();

      store.allMsg = {};
      let allKindObj = JSON.parse(JSON.stringify(allAudienceKind.value));
      for (const key in allKindObj) {
        getHistoryMsg(key);
      }
      // todo 检测麦克风
      console.log("store.rtcController", store.roomContent);
    } catch (err) {
      console.log("开始直播失败---", err);
      if (err.code == "10212") {
        $TipMessage("设备已占用，请关闭其他摄像头", "warning");
        isPlay.value = false;
      }
    }
  });
};
const getLeaveChatRoom = async () => {
  await store.roomContent.chatController.leaveChatroom();
  // .then((res) => {
  //   console.log(res, "leaveChatroom success");
  // })
  // .catch((err) => {
  //   console.log(err, "leaveChatroom fail");
  // });
};
// 关闭直播
// const closeRoomLive = async () => {
//   try {
//     // 关闭本地视频
//     let res1 = await store.roomContent?.rtcController?.muteMyVideo(
//       store.roomLiveInfo.id
//     );
//     console.log("res1", res1);
//     let res2 = await store.roomContent.rtcController.leaveRtcChannel();
//     console.log("res2", res2);

//     let res3 = await getLeaveChatRoom();
//     console.log("res3", res3);

//     isShowSvg.value = false;
//     // 关闭本地音频
//     // await store.roomContent?.rtcController?.muteMyAudio();
//     delQuit();
//     isPlay.value = false;
//     getOnlineAudiences();
//   } catch (err) {
//     console.log("关闭直播-err", err);
//   }
// };

const closeRoomLive = async () => {
  try {
    // 关闭本地视频
    let res1 = await store.roomContent?.rtcController?.muteMyVideo(
      store.roomLiveInfo.id
    );
    console.log("res1", res1);

    // 关闭本地音频
    // await store.roomContent?.rtcController?.muteMyAudio();

    // 离开 RTC 通道
    // let res2 = await store.roomContent?.rtcController?.leaveRtcChannel();
    // console.log("res2", res2);

    // // 离开聊天室
    let res3 = await getLeaveChatRoom();
    console.log("res3", res3);

    isShowSvg.value = false;

    // // 执行退出操作
    delQuit();
    upMike.value = [];
    manageMike.value = [];
    isPlay.value = false;
    switchTyp.value = !switchTyp.value;
    store.mittOb.emit("getIsPlay", false);

    // // 获取在线观众
    // await getOnlineAudiences();
  } catch (err) {
    console.error("关闭直播-err", err);
    // 可以在这里添加更多的错误处理逻辑
  }
};
// 刷礼屏的标签页切换
const handleGiftScreenTab = (val) => {
  curreGiftScreen.value = val.id;
};
// 进房间后获取改人员身份匹配
const getProfileMatch = async (uid) => {
  console.log("getProfileMatch-调用接口");
  return new Promise(async (resolve) => {
    try {
      let fd = new FormData();
      fd.append("search_uuid", uid);
      fd.append("room_uuid", store.roomLiveInfo.id);
      fd.append("room_archive_id", store.roomLiveInfo.room_archive_id);
      let res = await profileMatchApi(fd);
      console.log(res.errcode, "res", res);
      if (res.data.errcode === 0) {
        let useInfo = res.data.data.userinfo;
        let roominfo = res.data.data.roominfo;
        resolve({ useInfo, roominfo });
      }
    } catch (err) {
      console.log("getProfileMatch-err", err);
    }
  });
};
// 主播与观众互动
const inteAudience = ref({
  1: [],
  2: [],
  3: [],
});
// 获取在线观众
const getOnlineAudiences = async () => {
  // inteAudience.value[1] = [];
  let members = store.roomContent.remoteMembers;
  let mySelft = store.roomContent.localMember;
  // inteAudience.value[1] = members;
  console.log("获取在线观众-members", members);
  for (let i = 0; i < members.length; i++) {
    let v = members[i];
    if (mySelft.uuid === v.uuid) return;
    let obj = await getProfileMatch(v.uuid);
    v["userinfo"] = obj.useInfo;
    v["roominfo"] = obj.roominfo;
    // console.log("获取在线观众2", obj);
    allAudienceKind.value[v.uuid] = v;
    console.log("allAudienceKind.value", allAudienceKind.value);

    // // 获取上麦列表
    // let res = await invitMikeApi({ roomid: v.roominfo.id });
    // console.log("上麦列表-res", res);
    // // 获取麦管理列表
    // let res2 = await manageMikeApi({ roomid: v.roominfo.id });
    // console.log("麦管理列表-res", res2);
  }
  handleMapperKind();
};
const fun = (e) => {
  console.log("档案那边的来了");
  getOnlineAudiences();
};
store.mittOb.on("allOnline", fun);

// 加入房间
const getJoinLiveRoom = async () => {
  console.log("store.roomLiveInfo", store.roomLiveInfo);
  try {
    let res = await store.NERoomService?.joinRoom(
      {
        roomUuid: store.roomLiveInfo.id,
        userName: store.roomLiveInfo.nickname,
        role: "host",
        password: "",
      },
      {}
    );
    console.log(" 加入房间-res", res);
    store.roomContent = store.NERoomService.getRoomContext(
      store.roomLiveInfo.id
    );
    await store.roomContent.rtcController.joinRtcChannel();
    watchJoinLiveRoom();
  } catch (err) {
    console.log("加入房间-err", err);
  }
};

const watchJoinLiveRoom = () => {
  // 初始化
  allAudienceKind.value = {};
  for (const key in inteAudience.value) {
    inteAudience.value[key] = [];
  }

  store.roomContent?.addRoomListener({
    onMemberAudioMuteChanged: (member, mute) => {
      console.log("watch-onMemberAudioMuteChanged", member, mute);
    },
    onMemberJoinChatroom: async (members) => {
      console.log("watch-加入聊天室-msg", members);
      // 进入聊天
      handleMapperKind();
      // 进入聊天室获取历史消息
      store.allMsg = {};
      let allKindObj = JSON.parse(JSON.stringify(allAudienceKind.value));
      for (const key in allKindObj) {
        getHistoryMsg(key);
      }
    },
    onMemberJoinRoom: async (members) => {
      console.log("watch-onMemberJoinRoom", members);
      // moveDanmu(members);
      for (let i = 0; i < members.length; i++) {
        // 进房显示功能
        getJoinRoomDanmu(members[i]);
        let v = members[i];
        let obj = await getProfileMatch(v.uuid);
        // v["userinfo"] = obj;
        v["userinfo"] = obj.useInfo;
        v["roominfo"] = obj.roominfo;
        allAudienceKind.value[v.uuid] = v;
        inteAudience.value[1] = v;
      }
      handleMapperKind();
    },
    onMemberJoinRtcChannel: async (members) => {
      console.log("watch-onMemberJoinRtcChannel", members);
      console.log("本端", store.roomContent?.localMember);
      // for (let i = 0; i <script members.length; i++) {
      //   if (store.roomContent.localMember?.uuid === members[i].uuid) {
      //     return;
      //   }
      //   if (!allAudienceKind.value[members[i].uuid]) {
      //     // 进房显示功能
      //     getJoinRoomDanmu(members[i]);
      //     let v = members[i];
      //     let obj = await getProfileMatch(v.uuid);
      //     console.log("");
      //     // v["userinfo"] = obj;
      //     v["userinfo"] = obj.useInfo;
      //     v["roominfo"] = obj.roominfo;
      //     console.log("obj----------------------", obj);
      //     allAudienceKind.value[v.uuid] = v;
      //   }
      // }
      // handleMapperKind();
    },
    onMemberLeaveChatroom: (members) => {
      console.log("watch-onMemberLeaveChatroom", members);
    },
    onMemberLeaveRoom: (members) => {
      console.log("watch-onMemberLeaveRoom", members);
      handleDelMapperKind(members);

      store.mittOb.emit("close", false);
    },
    onMemberLeaveRtcChannel: (members) => {
      console.log("watch-onMemberLeaveRtcChannel", members);
      handleDelMapperKind(members);
    },
    onMemberRoleChanged: (member, oldRole, newRole) => {
      console.log("watch-onMemberRoleChanged", member, oldRole, newRole);
    },
    onMemberScreenShareStateChanged: async (member, isSharing) => {
      console.log("watch-onMemberScreenShareStateChanged", member, isSharing);
    },
    onMemberVideoMuteChanged: async (member, mute) => {
      console.log(
        recordSt.value,
        "watch-onMemberVideoMuteChanged",
        member,
        mute
      );
    },
    onMemberWhiteboardStateChanged: (member, isOpen) => {
      console.log("watch-onMemberWhiteboardStateChanged", member, isOpen);
    }, //  收到公屏的消息回调 礼物和信息
    // //  收到公屏的消息回调 礼物和信息
    // onReceiveChatroomMessages: (messages) => {
    //   console.log("watch- 收到公屏的消息回调 礼物和信息", messages);
    //   messages.forEach((v) => {
    //     if (v.attach.code === "sendgift") {
    //       console.log("11111111111111111sendgift", v);
    //       console.log("sendGift:::", v, v.attach.data);
    //       giveGift(v.attach.data);
    //     }
    //   });
    //   console.log(
    //     "publishScreenTexts----------------1",
    //     publishScreenTexts.value
    //   );
    //   console.log(
    //     "publishScreenGifts---------------2",
    //     publishScreenGifts.value
    //   );
    // },
    onReceiveChatroomMessages: (messages) => {
      console.log("watch- 收到公屏的消息回调 礼物和信息", messages);

      messages.forEach((v) => {
        console.log("attachStr", JSON.parse(v.attachStr));
        console.log("content", JSON.parse(v.content));
        console.log("v.from:", v.from);
        if (v.from === "server_user") {
          console.log("退出");
          return;
        }
        if (v.attach && v.attach.code === "sendgift") {
          if (!v.image) {
            giveGift(v.attach.data);
          }
        } else {
          if (v.type === "text") {
            toSendMsg(v.text);
          }
        }
      });
    },
    onRoomEnded: (reason) => {
      console.log("watch-onRoomEnded", reason);
    },
    onRtcChannelError: (code) => {
      console.log("watch-onRtcChannelError", code);
    },
    onRoomPropertiesChanged: (properties) => {
      console.log("watch-onRoomPropertiesChanged", properties);
    },
    onRoomPropertiesDeleted: (keys) => {
      console.log("watch-onRoomPropertiesDeleted", keys);
    },
    onMemberNameChanged: (member, name) => {
      console.log("watch-onMemberNameChanged", member, name);
    },
    onMemberPropertiesChanged: (uuid, properties) => {
      console.log("watch-onRoomPropertiesChanged", uuid, properties);
    },
    onMemberPropertiesDeleted: (uuid, keys) => {
      console.log("watch-onMemberPropertiesDeleted", uuid, keys);
    },
    onRtcActiveSpeakerChanged: (data) => {
      console.log("watch-onRtcActiveSpeakerChanged", data);
    },
    onRoomLockStateChanged: (isLocked) => {
      console.log("watch-onRoomLockStateChanged", isLocked);
    },
    onRoomConnectStateChanged: (state) => {
      console.log(
        "watch-onRoomLockonRoomConnectStateChangedStateChanged",
        state
      );
    },
  });
};

// const sendPublicScreen = () => {
//   store.enroomInstance?.messageChannelService.sendCustomMessageToRoom({

//   })
// };
const mapperKind = ref({}); //过滤后的数据
const handleMapperKind = () => {
  mapperKind.value = {};
  let obj = {};
  let allKindObj = JSON.parse(JSON.stringify(allAudienceKind.value));
  console.log("allKindObj", allKindObj);
  //1.所有  obj.guizu === 1
  if (audienceTyp.value === 1) {
    obj = allKindObj;
    console.log("tab1111111111111111", obj);
  }

  //2.贵族  obj.role === "host"
  if (audienceTyp.value === 2) {
    for (let key in allKindObj) {
      console.log(key, "2222222222222222", allKindObj[key]);
      if (allKindObj[key].userinfo.guizu === 1) {
        obj[key] = allKindObj[key];
      }
    }
  }

  //3.管理  obj.role === "audience" || obj.guizu === 0
  if (audienceTyp.value === 3) {
    for (let key in allKindObj) {
      console.log(key, "tab33333333333333", allKindObj[key]);
      if (allKindObj[key].userinfo.role === "roomadmin") {
        obj[key] = allKindObj[key];
      }
    }
  }
  mapperKind.value = obj;
  console.log("mapperKind.value ", mapperKind.value);
  // for (const key in mapperKind.value) {
  //   getHistoryMsg(key);
  // }
  //做历史消息
};
// 历史消息获取
const getHistoryMsg = async (uid) => {
  await store.nimInstance.getLocalMsgs({
    sessionId: "p2p-" + uid, //表示单聊场景(p2p)，对方账号为account。
    limit: 100,
    done: (err, obj) => {
      console.log("历史消息获取-obj ", obj);
      if (!err && obj) {
        if (store.allMsg[uid]) {
          store.allMsg[uid] = [...obj.msgs, ...store.allMsg[uid]];
        } else {
          store.allMsg[uid] = [...obj.msgs];
        }
        console.log("历史消息获取", store.allMsg);
        store.uidStr = Object.keys(store.allMsg).filter(
          (v) => store.allMsg[v].length
        );
      }
    },
  });
};
// 删除在线用户数据
const handleDelMapperKind = (members) => {
  console.log(members.length);
  console.log("before-mapperKind.value", mapperKind.value);
  console.log("before-allAudienceKind.value", allAudienceKind.value);

  members.forEach((v) => {
    if (store.allMsg[v.uuid]) {
      delete store.allMsg[v.uuid];
    }
    delete mapperKind.value[v.uuid];
    delete allAudienceKind.value[v.uuid];
    // 清空
    for (const key in inteAudience.value) {
      delete inteAudience.value[key].uuid;
    }
  });
  console.log("after-mapperKind.value", mapperKind.value);
  console.log("after-allAudienceKind.value", allAudienceKind.value);
};
//删除所有
const delQuit = () => {
  store.allMsg = {};
  mapperKind.value = {};
  allAudienceKind.value = {};
  for (const key in inteAudience.value) {
    inteAudience.value[key] = [];
  }
};
// 公屏储存
const publicScreenOB = ref({
  whoHere: "", //显示谁进来了
});
const isClos = ref(true);
// 收集发送信息的对象
const publishScreenTexts = ref({});
// 谁发送给谁的记录
const publishScreenGifts = ref(null);
// 监听自定义消息
const watchPublicScreen = () => {
  store.enroomInstance?.messageChannelService?.addMessageChannelListener({
    onCustomMessageReceived: (msg) => {
      console.log("watch-监听自定义消息", msg);
      let rezult = null;
      try {
        rezult = JSON.parse(msg?.data);
        console.log("watch-监听自定义消息-rezult", rezult);

        if (rezult?.code === "videoformatteam") {
          console.log("watch-rezult", rezult);
          if (isClos.value) {
            console.log("isClos.value", isClos.value);
            store.mittOb.emit(
              "videoformatteam",
              JSON.parse(JSON.stringify(rezult))
            );
          }
        } else if (rezult?.code === "videopkvalue") {
          teamsInfo.value = rezult.data.teams;
          pkRoomInfo.value["room_uuid"] = rezult.data.pkid;
          nextTick(() => {
            startPk(rezult.data.pkid);
          });
          //监听app申请连麦
        } else if (rezult?.code === "videoapplycontact") {
          interactionCurr.value = 2;
          console.log("rezult.data:", rezult.data);

          if (upMike.value.length) {
            upMike.value.forEach((v) => {
              console.log("v", v);
              if (v.uid === rezult.data.userinfo.uid) {
                return;
              } else {
                upMike.value.push(rezult.data.userinfo);
              }
            });
          } else {
            if (manageMike.value.length) {
              manageMike.value.forEach((v) => {
                console.log("vv", v);
                if (v.uid === rezult.data.userinfo.uid) {
                  interactionCurr.value = 3;
                  return;
                } else {
                  upMike.value.push(rezult.data.userinfo);
                }
              });
            } else {
              upMike.value = [rezult.data.userinfo];
            }
          }
          console.log("upMike.value2", upMike.value);
        } else if (rezult?.code === "videohandlecontact") {
          if (manageMike.value.length) {
            manageMike.value.forEach((v) => {
              console.log("v", v);
              console.log("rezult.userinfo.uid", rezult.userinfo.uid);
              if (rezult.data.userinfo.uid == v.uid) {
                return;
              } else {
                manageMike.value.push(rezult.data.userinfo);
              }
            });
          } else {
            console.log("rezult.userinfo", rezult.data.userinfo);
            manageMike.value = [rezult.data.userinfo];
          }
          // app 发送的同意1or2拒绝
        } else if (rezult?.code === "videouserhandlecontact") {
          if (rezult.data.status == "1") {
            if (manageMike.value.length) {
              manageMike.value.forEach((v) => {
                console.log("v", v);
                if (v.uid === rezult.data.userinfo.uid) {
                  return;
                } else {
                  manageMike.value.push(rezult.data.userinfo);
                }
              });
            } else {
              manageMike.value = [rezult.data.userinfo];
            }
            interactionCurr.value = 3;
          }
          // pc 挂断连麦
        } else if (rezult?.code === "videostopcontact") {
          if (rezult.data.status == 0) {
            // manageMike.value
          }
        }
      } catch (err) {
        if (msg?.data.length) {
          rezult = msg.data;
          console.log("2", msg.data);
        } else {
          console.log("3", msg.data);
        }
      }
      // publicScreenOB.value.whoHere = msg.data.members.userName;
    },
  });
  // publicScreenOB.value.whoHere = msg.data.operatorMember.userName;
};
// 测试用
// const sendSign = () => {
//   store.enroomInstance.messageChannelService.sendCustomMessageToRoom(
//     '596201',
//     10085,
//     "你好"
//   ).then(res=>{
//     console.log('res----------sendSign---------',res);
//   }).catch(err=>{
//     console.log('err--------sendSign-----------',err);
//   });
// };
//加入聊天室
const getJoinChatRoom = async () => {
  await store.roomContent.chatController
    .joinChatroom()
    .then((res) => {
      console.log(res, "joinChatroom success");
    })
    .catch((err) => {
      console.log(err, "joinChatroom fail");
    });
};
// 监听进入房间
const watchInRoom = () => {
  if (!store.roomLiveInfo) {
    setTimeout(() => {
      watchInRoom();
    });
  } else {
    initAll();
  }
};
// todoing
// txt
const initSvga = () => {
  new SVGA.autoload(document.querySelector("#demoCanvas"));
};
const isShowSvg = ref(false);
const isShowTxt = ref(false);
const svgaVal = ref("");
const txtVal = ref({
  sender: "",
  reciver: "",
  giftName: "",
  giftNum: "",
});
// 默认0 显示默认样式
let animateStatus = ref(0);
// 是否正在执行动画中
const isAnimating = ref(false);
// 队列数组
const queueArr = ref([]);

// 显示谁发送礼物和svga
const giveGift = (v) => {
  // debugger;
  queueArr.value.push(v);
  if (!isAnimating.value) {
    let first = queueArr.value.shift();
    console.log("3-queueArr.value", JSON.stringify(queueArr.value));
    isAnimating.value = true;

    draw1(first);
  }
};
const handleMult = () => {
  // animateStatus.value = 1;
  // debugger;
  if (!isAnimating.value && queueArr.value.length > 0) {
    let first = queueArr.value.shift();
    isAnimating.value = true;
    draw1(first);
  } else {
    return;
  }
};
// const draw1 = (first) => {
//   // debugger;
//   console.log("draw-first---------------", first);
//   isShowSvg.value = true;
//   isShowTxt.value = true;
//   txtVal.value.sender = first.senduser.nickname;
//   // txtVal.value.reciver = first.touser[0].nickname;
//   // txtVal.value.giftNum = first.touser[0].giftinfo.num;
//   // txtVal.value.giftName = first.touser[0].giftinfo.name;
//   svgaVal.value = first.touser[0].giftinfo.svgaimg;
//   nextTick(() => {
//     initSvga();
//   });
//   setTimeout(() => {
//     animateStatus.value = 1;
//     setTimeout(() => {
//       animateStatus.value = 2;
//       isShowSvg.value = false;
//       setTimeout(() => {
//         isShowTxt.value = false;
//         isAnimating.value = false;
//         animateStatus.value = 0;
//         handleMult();
//       }, 1000);
//     }, 5000);
//   }, 100);
// };

const draw1 = (first) => {
  // isAnimating.value = true;
  // debugger;
  console.log("draw-first---------------", first);
  isShowSvg.value = true;
  isShowTxt.value = true;
  txtVal.value.sender = first.userinfo.nickname;
  console.log("txtVal.value.sender", txtVal.value.sender);
  txtVal.value.reciver = first.touser[0].nickname;
  txtVal.value.giftNum = first.touser[0].giftinfo.num;
  txtVal.value.giftName = first.touser[0].giftinfo.name;
  svgaVal.value = store.imgPrefix + first.touser[0].giftinfo.svgaimg;
  console.log(" svgaVal.value", svgaVal.value);
  nextTick(() => {
    initSvga();
  });
  setTimeout(() => {
    animateStatus.value = 1;
    setTimeout(() => {
      animateStatus.value = 2;
      isShowSvg.value = false;
      setTimeout(() => {
        isShowTxt.value = false;
        isAnimating.value = false;
        animateStatus.value = 0;
        nextTick(() => {
          handleMult();
        });
      }, 1000);
    }, 5000);
  }, 100);
};

// 进入房间的
const joinRoomQueue = ref([]);
const isShowTxt2 = ref(false);
const txtVal2 = ref("");
let animateStatus2 = ref(0);
const isAnimating2 = ref(false);
// 显示谁进来了
const getJoinRoomDanmu = (obj) => {
  joinRoomQueue.value.push(obj);
  if (!isAnimating2.value) {
    let first = joinRoomQueue.value.shift();
    isAnimating2.value = true;
    draw2(first);
  }
};
const handleMult2 = () => {
  nextTick(() => {
    if (!isAnimating2.value && joinRoomQueue.value.length > 0) {
      let first = joinRoomQueue.value.shift();
      isAnimating2.value = true;
      draw2(first);
    }
  });
};

const draw2 = (first) => {
  isAnimating2.value = true;
  isShowTxt2.value = true;
  txtVal2.value = first.name;
  setTimeout(() => {
    animateStatus2.value = 1;
    setTimeout(() => {
      animateStatus2.value = 2;
      setTimeout(() => {
        isShowTxt2.value = false;
        isAnimating2.value = false;
        animateStatus2.value = 0;
        handleMult2();
      }, 1000);
    }, 5000);
  }, 100);
};
// todoing
const initAll = async () => {
  console.log(" store.roomLiveInfo-initAll", store.roomLiveInfo);
  await getJoinLiveRoom();
  await getJoinChatRoom();
  console.log("上下文", store.roomContent);
  getLiveDevices();
  let res = await quickReplyListApi({
    page: 1,
    limit: 10,
    roomid: store.roomLiveInfo.id,
  });
  console.log("quickReplyListApi", res);
};
const handleMiddIcon = (val) => {
  console.log("open-val", val);
  if (val === 10) {
    store.mittOb.emit("pkDialog", true);
  } else if (val === 11) {
    console.log("open-val-gift");
    store.mittOb.emit("giftDialog", true);
  }
};
const closeDanmu = (val) => {
  if (val === 1) {
    manager.show();
  } else {
    manager.hide();
  }
};
function randomColor() {
  return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(
    Math.random() * 256
  )}, ${Math.floor(Math.random() * 256)})`;
}
const initDanmu = () => {
  manager = create({
    gap: 100,
    trackHeight: 20,
    interval: 10000,
    plugin: {
      $createNode(danmaku) {
        danmaku.node.textContent = danmaku.data;
      },
      willRender(ref) {
        ref.prevent = false;
        return ref;
      },
      $destroyed(danmaku, mark) {
        console.log("destroyed-danmaku", danmaku);
        console.log("destroyed-mark", mark);
        danmaku = null;
      },
      $beforeMove(danmaku) {
        let colr = randomColor();
        console.log("colr", colr);
        danmaku.node.style.color = colr;
        danmaku.node.style.fontFamily = "Microsoft YaHei";
        danmaku.node.style.fontSize = "32px";
        console.dir(danmaku.node);
      },
    },
    direction: "right",
    mode: "adaptive",
  });
};

const renderDanmu = () => {
  let outVideo = document.querySelector(".mylive>div");
  outVideo.style.position = "relative";
  let danmu = document.createElement("div");
  danmu.id = "danmu";
  danmu.style.height = "100%";
  console.log("outVideo:", outVideo, "danmu:", danmu);
  outVideo.appendChild(danmu);
  manager.mount(danmu);
  manager.startPlaying();
};
const moveDanmu = (v) => {
  // textList.forEach((v, i) => {
  let option = {
    id: 1, //
    duration: 10000,
    direction: "right",
    position: (danmaku, container) => {
      const containerWidth = container.width;
      const containerHeight = container.height;
      const danmakuWidth = danmaku.getWidth();
      const danmakuHeight = danmaku.getHeight();
      const randomX = containerWidth;
      const randomY = Math.random() * (containerHeight - danmakuHeight);
      return {
        x: randomX,
        y: randomY,
      };
    },
    style: {
      color: "#ffffff",
      fontSize: "32px",
    },
  };
  manager.pushFlexibleDanmaku(v, option);
  // });
};
const followFun = async (e) => {
  console.log("followFun-e", e);
};
const getKickAudience = async (uid) => {
  try {
    await store.roomContent?.kickMemberOut(uid);
  } catch (err) {
    console.log("移除成员-err", err);
  }
};
store.mittOb.on("follow", followFun);
const elementList = ref([]);
const showMenu = async (e, index, item) => {
  let profile2 = {};

  getuserinfo({ userid: index }).then((res) => {
    if (res.data.errcode === 0) {
      profile2 = { ...res.data };
      console.log("profile2-res", profile2);
    }
  });

  e.preventDefault();
  const MouseMenuCtx = CustomMouseMenu({
    el: elementList.value[index],
    menuList: [
      {
        fn: async (Params) => {
          console.log("点击了", Params);
          store.mittOb.emit("profile", { profile1: Params.item, profile2 });
        },
        label: "查看资料",
      },
      {
        fn: async (Params) => {
          console.log("点击了", Params);

          if (receiveInfo.value) {
            profile2["receiveInfo"] = receiveInfo.value;
          }
          store.mittOb.emit("chat", profile2);
        },
        label: "私聊",
      },
      {
        fn: (Params) => {
          console.log("点击了", Params);
          let isfollow = Number(Params.item.userinfo.is_follow);
          console.log("isfollow-", isfollow);
          getIsFollow({
            followuid: Params.index,
            str: isfollow === 0 ? "follow" : "unfollow",
          }).then((res) => {
            console.log("handleFollow-res", res);
            if (res.data.errcode === 0) {
              // Params.item.userinfo.is_follow = Number(
              //   !Params.item.userinfo.is_follow
              // );
              nextTick(() => {
                getOnlineAudiences();
              });
            }
          });
        },
        label: item.userinfo.is_follow === 0 ? "关注" : "取消关注",
      },
      {
        fn: (Params) => {
          console.log("点击了", Params);
        },
        label: "邀请连麦",
      },
      {
        fn: async (Params) => {
          try {
            console.log("点击了", Params);
            // return;
            let fd = new FormData();
            fd.append("room_archive_id", Params.item.roominfo.room_archive_id);
            fd.append("chat", !Params.item.userinfo.is_mute);
            fd.append("video", false);
            fd.append("audio", false);
            fd.append("user_uuid", Params.index);
            if (Params.item.userinfo.is_mute == 0) {
              await forbiddenTalk(fd);
            } else if (Params.item.userinfo.is_mute == 1) {
              await forbiddenTalkBack(fd);
            }
            nextTick(() => {
              getOnlineAudiences();
            });
          } catch (err) {
            console.log("禁言-err", err);
          }
        },
        label: item.userinfo.is_mute === 0 ? "禁言" : "取消禁言",
      },
      {
        fn: async (Params) => {
          console.log("点击了", Params);
          try {
            let fd = new FormData();
            fd.append("room_archive_id", Params.item.roominfo.room_archive_id);
            fd.append("change_user_uuid", Params.index);
            fd.append("room_uuid", Params.item.userinfo.roomid);
            if (Params.item.userinfo.role === "audience") {
              fd.append("role", "roomadmin");
            } else {
              fd.append("role", "audience");
            }
            let res = await modifyRole(fd);
            nextTick(() => {
              getOnlineAudiences();
            });
            console.log("设为管理-res", res);
          } catch (err) {
            console.log("设为管理-err", err);
          }
        },
        label: item.userinfo.role == "audience" ? "设为管理" : "取消管理",
      },

      // {
      //   fn: (Params) => {
      //     console.log("点击了", Params);
      //   },
      //   label: "",
      // },
      {
        fn: (Params) => {
          console.log("点击了", Params);
          isOpReport.value = true;
          reportForm.value["touid"] = Params.index;
          // let fd = new FormData();
          // fd.append("type", 1);
          // fd.append("touid", Params.index);
          // reportMemberApi().then((res) => {
          //   console.log("举报-res", res);
          // });
        },
        label: "举报",
      },
      {
        fn: async (Params) => {
          console.log("点击了", Params);
          try {
            let fd = new FormData();
            fd.append("room_archive_id", Params.item.roominfo.room_archive_id);
            fd.append("user_uuid", Params.index);
            let res = await ticketOut(fd);
          } catch (err) {
            console.log("err", err);
          }
          // nextTick(async () => {
          //   await getKickAudience(Params.index);
          // });
        },
        label: "踢出房间",
      },
    ],
    params: {
      index,
      item,
    },
  });
  const { x, y } = e;
  MouseMenuCtx.show(x, y);
};
const receiveImMsg = (msg) => {
  receiveInfo.value = msg;
};
// 访问 getters
const getClose = (e) => {
  isClos.value = e;
};
// const isContrib = ref(false);
const handleContribution = () => {
  store.isContrib = true;
  if (store.isContrib) {
    nextTick(() => {
      getSortList();
    });
  }
};
const getSortList = () => {
  getPaihang({
    type: 1,
    type1: 4,
    page: 1,
    limit: 10,
  }).then((res) => {
    if (res.data.errcode === 0) {
      let arr2 = res.data.list.sort((a, b) => {
        return b.score - a.score;
      });
      let arr1 = arr2.splice(0, 3);
      store.contribuInfo = { arr2, arr1 };
    }
    console.log("贡献榜--------------------------", store.contribuInfo);
  });
};
// 开启pk的视频
const startPkVideo = async () => {
  await store.pkRoomContent.rtcController.unmuteMyVideo();
  await store.pkRoomContent.rtcController.unmuteMyAudio();
};
const joinPKRoom = function () {
  console.log("pkRoomInfo.value:", pkRoomInfo.value);
  return new Promise(async (resolve) => {
    let pKroomRes = await store.NERoomService?.joinRoom(
      {
        roomUuid: pkRoomInfo.value?.room_uuid,
        userName: "pk",
        role: "pk_host",
        password: "",
      },
      {}
    );
    console.log("pKroomRes============", pKroomRes);
    if (pKroomRes.code === 0) {
      store.pkRoomContent = store.NERoomService.getRoomContext(
        pkRoomInfo.value?.room_uuid
      );
      resolve();
    }
  });
};
const startPk = async (e) => {
  //1. 获取pk房间信息
  pkRoomInfo.value["room_uuid"] = e;
  console.log(pkRoomInfo.value, "on监听的房间信息事件", e);

  // 2.删除推流任务
  store.roomContent.liveController.removeLiveStreamTask(taskId.value);
  // 3.离开各自的rtc
  store.roomContent.rtcController.leaveRtcChannel(store.roomLiveInfo.id);
  await joinPKRoom();
  // 4. 加入pk房间
  store.pkRoomContent.rtcController
    .joinRtcChannel() //pkRoomInfo.value.room_uuid
    .then(async (ress) => {
      console.log("joinRtc=====res", ress);
      startPkVideo();
      //4. pk房监听
      store.pkRoomContent.addRoomListener({
        onMemberJoinRtcChannel: async function (members) {
          members.forEach((v) => {
            if (v.uuid === store.pkRoomContent.localMember.uuid) return;
            console.log("v", v);
            playerList.value[v.uuid] = v;
          });
          nextTick(() => {
            for (const key in playerList.value) {
              const element = document.querySelector("#other-player" + key);
              console.log("element", element);
              store.pkRoomContent.rtcController.setupRemoteVideoCanvas(
                element,
                key
              );
              store.pkRoomContent.rtcController.subscribeRemoteVideoStream(key);
            }
          });
        },
        // leave rtc
        onMemberLeaveRtcChannel: (members) => {
          console.log("onMemberLeaveRtcChannel--------------离开", members);
        },
      });

      // 推流任务参数
      const livestreamTask = {
        taskId: store.roomLiveInfo.uid,
        streamUrl: pushUrl.value,
        serverRecordEnabled: false,
        mode: "",
        layout: {
          width: 1920,
          height: 1080,
          backgroundColor: 0,
          images: [
            {
              width: 1920,
              height: 1080,
              url: "https://img0.baidu.com/it/u=3532815673,79378611&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1734714000&t=4a93449bdcb0c9725f62a0040f7c7e57",
              x: 0,
              y: 0,
            },
          ],
          userTranscodingList: [
            {
              uuid: store.roomLiveInfo.uid,
              videoPush: true,
              audioPush: true,
              x: 0,
              y: 0,
              width: 960,
              height: 1080,
              zOrder: 0,
            },
            {
              uuid: teamsInfo.value.room2.userinfo.uid,
              videoPush: true,
              audioPush: true,
              x: 960,
              y: 0,
              width: 960,
              height: 1080,
              zOrder: 0,
            },
            {
              uuid: teamsInfo.value.room3.userinfo.uid,
              videoPush: true,
              audioPush: true,
              x: 0,
              y: 540,
              width: 960,
              height: 1080,
              zOrder: 0,
            },
          ],
        },
        config: {
          singleVideoPassThrough: false,
          audioBitrate: 0,
          channels: 0,
          sampleRate: "",
          audioCodecProfile: "",
        },
        extraInfo: "extraInfo",
      };
      // 6. NERoomContext.liveController.addLiveStreamTask retrun promise
      let rezult = await store.pkRoomContent.liveController.addLiveStreamTask(
        livestreamTask
      );
      console.log("addLiveStreamTask-rezult", rezult);
    })
    .catch((err) => {
      console.log("joinRtc=====err", err);
    });
};
watch(
  () => playerList.value,
  (nv) => {
    console.log("playerList-nv", nv);
  },
  {
    deep: true,
  }
);
const handleInvite = (e) => {
  console.log("handleInvite-e", e);
  let data = { roomid: store.roomLiveInfo.id, userid: e.uuid };
  console.log("data", data);
  invitAudience(data).then((res) => {
    console.log("res-invitAudience", res);
  });
};
const getReportMember = () => {
  reportMember(reportForm.value).then((res) => {
    console.log("举报-res", res);
    if (res.data.errcode === 0) {
      isOpReport.value = false;
      $TipMessage("举报成功", "success");
    }
  });
};
import NERTC from "nertc-web-sdk";
// const initNeRtc = () => {
//   //创建 client 实例
//   let client = NERTC.createClient({
//     appkey: store.appKey, //您的 App Key
//     debug: true, //是否开启调试日志
//   });
//   console.log("client", client);
// };
const customStream = async () => {
  console.log("liveForm.deviceVedio", liveForm.deviceVedio);
  let res = await navigator.mediaDevices.getUserMedia({
    audio: true, // 不捕获音频（若需音频见下文注意事项）
    video: true,
    // video: {
    //   mandatory: {
    //     chromeMediaSource: "desktop",
    //     // chromeMediaSourceId: targetSource.id,
    //     chromeMediaSourceId: liveForm.deviceVedio,
    //     minWidth: 1280,
    //     maxWidth: 1920,
    //     minHeight: 720,
    //     maxHeight: 1080,
    //     minFrameRate: 15,
    //     maxFrameRate: 30,
    //   },
    // },
  });
  console.log("res-stream", res);
  var audioSource = res.getAudioTracks()[0];
  var videoSource = res.getVideoTracks()[0];

  // 绑定到 video 标签
  const video = document.getElementById("preview");
  video.srcObject = res;
  video.onloadedmetadata = () => video.play();
  let rezult = window.WebRTC2.createStream({
    video: true,
    audio: true,
    audioSource: audioSource,
    videoSource: videoSource,
  });
  console.log("rezult", rezult);
  // let myStream = await store.roomContent?.rtcController?._rtc._client.publish(
  //   rezult
  // );
};
const getResoures = () => {
  ipcRenderer.on("getProcess", async (data, event) => {
    console.log("getProcess-------------", event);
    event.forEach((v) => {
      deviceVedioList.value.push({
        deviceName: v.name,
        deviceId: v.id,
      });
      // if (v.name.includes("YY")) {
      //   deviceVedioList.value.push({
      //     deviceName: v.name,
      //     deviceId: v.id,
      //   });
      // } else {
      //   return;
      // }
    });

    return;
    // let res = await navigator.mediaDevices.getUserMedia({
    //   audio: false, // 不捕获音频（若需音频见下文注意事项）
    //   video: {
    //     mandatory: {
    //       chromeMediaSource: "desktop",
    //       // chromeMediaSourceId: targetSource.id,
    //       chromeMediaSourceId: event[0].id,
    //       minWidth: 1280,
    //       maxWidth: 1920,
    //       minHeight: 720,
    //       maxHeight: 1080,
    //       minFrameRate: 15,
    //       maxFrameRate: 30,
    //     },
    //   },
    // });
    // console.log("res-stream", res);

    // var audioSource = res.getAudioTracks()[0];
    // var videoSource = res.getVideoTracks()[0];

    // console.log("111-todo", store.roomContent?.rtcController);
    // console.log("222-todo", store.roomContent?.rtcController?._rtc);
    // console.log(
    //   "333-todo",
    //   store.roomContent?.rtcController?._rtc?.createStream
    // );
    // let rezult = window.WebRTC2.createStream({
    //   video: true,
    //   audio: true,
    //   audioSource: audioSource,
    //   videoSource: videoSource,
    // });
    // console.log("rezult", rezult);
    // let myStream = await store.roomContent?.rtcController?._rtc._client.publish(
    //   rezult
    // );
    // console.log(
    //   "看订阅",
    //   store.roomContent?.rtcController?._rtc._client.subscribe
    // );

    // console.log(store.roomContent,'store.NERoomService',store.NERoomService);

    // store.roomContent?.rtcController._rtc.localStream.init();
    // rtc.localStream.init()
    // let newAr = event.map((v) => {
    //   return {
    //     label: v.name,
    //     deviceId: v.id,
    //     ...v,
    //   };
    // });
    // deviceVedioList.value = [...newAr, ...deviceVedioList.value];
  });
  ipcRenderer.send("process-all");
};
const recordSt = ref(0);
const linkToChannelRoom = async (val) => {
  store.roomLiveInfo = val;
  try {
    if (isPlay.value) {
      console.log("isPlay.value", isPlay.value);
      await closeRoomLive();
    }
    setTimeout(async () => {
      await getJoinLiveRoom();
    }, 500);
  } catch (err) {
    console.log("linkToChannelRoom-err", err);
  }
};
const handleMike = () => {
  isPlayDialog.value = true;
};
const closePlayDialog = () => {
  isPlayDialog.value = false;
};
onMounted(async () => {
  watchInRoom();
  store.mittOb.on("videoformatteamok", getClose);
  store.mittOb.on("linkToChannelRoom", linkToChannelRoom);
});
</script>

<style lang="scss" scoped>
// #local-player>div {
//   object-fit: cover !important;
// }
// .screen_row0 video {
//   aspect-ratio: 16/9;
//   width: auto !important;
// }
// .screen_colum1 video {
//   // aspect-ratio: 9/16;
//   // height: auto !important;
//   height: 100% !important;
//   width: calc(495px * 9 / 16);
// }
// 自定义dialog
.playDialog {
  .clos_img {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 9px;
    right: 9px;
  }
  .title_dial {
    padding: 20px;
    width: 100%;
    text-align: center;
  }
  background: #282c2f;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 500px;
  padding: 15px;
  .mind_up_inner {
    height: 100%;
    .device_box {
      display: flex;
      justify-content: center;

      width: 100%;
      .deviceTyp {
        display: flex;
        justify-content: center;
        align-content: center;
        span {
          display: inline-block;
          line-height: 26px;
        }
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #707070;
        padding: 6px 33px 0 28px;
        box-sizing: border-box;
        img {
          width: 26px;
          height: 26px;
        }
      }
      .deviceTyp:last-child {
        margin-left: 38px;
      }
      .active_devi {
        border: 1px solid #895cf8;
        color: #895cf8;
      }
    }

    .startPlay {
      text-align: center;
      margin: 180px auto 0;
      padding: 4px 59px;
      border-radius: 50px 50px 50px 50px;
      background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
    }
  }
}
.main_container {
  padding: 7px 0 8px;
  height: calc(100vh - 112px);
  background: #232729;
  .main_inner {
    .side {
      min-width: 400px;
      max-width: 450px;
      // background: #dba9e6;
    }
    .midd {
      flex: 1;
      background: #232729;
      display: flex;
      flex-direction: column;

      .player {
        :deep(.svga) {
          width: 150%;
          height: 150%;
          // border: 1px solid red;
          position: absolute;
          left: 50%;
          top: 30%;
          transform: translate(-50%, -50%);
          z-index: 999;
        }
        height: 100%;
        width: 100%;
        flex: 1;
        display: flex;
        // height: 495px;
        background: #1d1f22;
        border-radius: 0px 0px 0px 0px;
        position: relative;
        // start
        .flayer_box {
          width: 100%;
          height: 100%;
          display: flex;
          .me {
            flex: 1;
          }
          .other {
            flex: 1;
            display: flex;
            flex-direction: column;
            // background: rgb(255, 102, 0);
            .item {
              // border: 1px solid rgb(241, 173, 71);
              flex: 1;
            }
          }
          .common {
            width: 50%;
            height: 50%;
            box-sizing: border-box;
            // border: 1px solid red;
          }
        }
        /* v-else */
        .flayer_box2 {
          flex-wrap: wrap;
          .common {
            width: 50%;
            height: 50%;
            box-sizing: border-box;
            // border: 1px solid red;
          }
        }

        //end todo
        .closePlayer {
          display: none;
          position: absolute;
          left: 50%;
          top: 85%;
          transform: translate(-50%);
          width: 184px;
          height: 40px;
          // padding: 11px 0;
          box-sizing: border-box;
          background: #45484b;
          border-radius: 50px 50px 50px 50px;
          color: #939596;
          font-size: 18px;
          text-align: center;
          line-height: 40px;
          z-index: 9999;
        }
      }
      .player:hover {
        .closePlayer {
          display: block;
        }
      }
      // 上面部分
      .mind_up {
        flex: 1;
        // height: 495px; // 固定
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        background: #1d1f22;
        .mind_up_inner {
          .startPlay {
            text-align: center;
            margin: auto;
            padding: 4px 59px;
            border-radius: 50px 50px 50px 50px;
            background: #45484b;
          }
          // 等待状态
          .active_startPlay {
            background: linear-gradient(90deg, #a13cf3 0%, #7e6bfb 100%);
          }
          :deep(.el-input__inner) {
            height: 38px;
          }
          :deep(.el-select__wrapper) {
            height: 38px;
          }
          .title {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
          .device_box {
            display: flex;
            justify-content: center;
            width: 100%;

            .deviceTyp {
              display: flex;
              justify-content: center;
              align-content: center;
              span {
                display: inline-block;
                line-height: 26px;
              }
              border-radius: 4px 4px 4px 4px;
              border: 1px solid #707070;
              padding: 6px 33px 0 28px;
              box-sizing: border-box;
              img {
                width: 26px;
                height: 26px;
              }
            }
            .deviceTyp:last-child {
              margin-left: 38px;
            }
            .active_devi {
              border: 1px solid #895cf8;
              color: #895cf8;
            }
          }
        }
      }
      .mind_down {
        background: #1d1f22;
        // margin-top: 8px;
        flex: 0.7;
        position: relative;
        overflow: auto; //11-19 add
        .random_box {
          position: absolute;
          right: 11px;
          bottom: 90px;
          width: 114px;
          height: 140px;
          background: #f07ad2;
          border-radius: 6px 6px 6px 6px;
        }

        padding-top: 18px;
        margin-top: 8px;
        // border: 1px solid red;
        box-sizing: border-box;
        // background: #e06ec4;
        background: #1d1f22;
        .inner {
          height: 100%;
          border-radius: 8px 8px 8px 8px;
          padding-left: 15px;
          box-sizing: border-box;
        }
        .tabs {
          display: flex;
          width: 363px;
          background: #141618;
          border-radius: 50px 50px 50px 50px;
          text-align: center;
          .tabs_item {
            padding: 6px 17px;
            width: 33.3%;
            box-sizing: border-box;
            cursor: pointer;
            color: #939596;
          }
          .active_tab {
            background: #434546;
            color: #ffffff;
            border-radius: 50px 50px 50px 50px;
          }
          .tabs_item:active {
            background: #434546;
            color: #ffffff;
            border-radius: 50px 50px 50px 50px;
          }
        }
        .out {
          height: calc(100% - 33px);
          display: flex;
          flex-direction: column;
        }

        .content {
          flex: 1;
          margin: 20px 0;
          width: 100%;
          border-radius: 4px 4px 4px 4px;
          box-sizing: border-box;
          position: relative;
          overflow: hidden;
          :deep(.txt) {
            width: 50%;
            max-width: 450px;
            box-sizing: border-box;
            background-image: url("../assets/main_imgs/bg_txt.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            font-size: 14px;
            padding: 7px 10px;
            box-sizing: border-box;
            // animation: move 2s linear forwards;
            transition: all 3s ease;
            position: absolute;
            left: 100%;
            top: 20px;
          }
          :deep(.txt2) {
            width: 50%;
            max-width: 450px;
            box-sizing: border-box;
            height: 34px;
            background: #000000;
            border-radius: 4px 4px 4px 4px;
            opacity: 0.3;
            justify-content: center;
            padding-left: 10px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            color: #efe28b;
            transition: all 3s ease;
            position: absolute;
            left: 100%;
            top: 20px;
          }
          .txt_act1 {
            left: 20px;
          }
          .txt_act2 {
            left: -430px;
            transition: all 1s ease;
          }

          .txt:not(:last-child) {
            margin-bottom: 23px;
          }
        }
        .icons {
          display: flex;
          .left_item,
          .right_item {
            display: flex;
          }

          img {
            width: 36px;
            height: 36px;
          }
          display: flex;
          justify-content: space-between;
          padding: 7.5px 0;
          box-sizing: border-box;
          .item {
            padding: 0 7.5px;
            box-sizing: border-box;
            cursor: pointer;
          }
        }
      }
    }
    // 右边
    .right {
      // background: #1d1f22;
      padding: 7px 8px 0 12px;
      display: flex;
      flex-direction: column;
      .right_up {
        flex: 1;
        .switch {
          padding: 13px 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #1d1f22;
        }
        .tabs {
          display: flex;
          align-items: center;
          text-align: center;
          // background: #282c2f;
          border-radius: 0px 0px 0px 0px;
          font-size: 16px;
          .item {
            padding: 20px 0;
            box-sizing: border-box;
            flex: 1;
          }
          .active_tab {
            color: #895cf8;
          }
        }
        .out_chat_text {
          height: 230px;
          overflow-y: auto;
          background: #1d1f22;
          // border: 1px solid red;
          position: relative;
        }
        .chat_text {
          padding: 24px 12px;
          box-sizing: border-box;
          .avator {
            width: 62px;
            height: 62px;
            background: #ffffff;
            border-radius: 50%;
            margin-right: 13px;
            img {
              width: 62px;
              height: 62px;
              border-radius: 50%;
            }
          }

          .btn {
            padding: 7px 23px;
            box-sizing: border-box;
            font-size: 12px;
            background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
            border-radius: 50px 50px 50px 50px;
          }
          .two_btn > .reju:active {
            box-shadow: 1px 1px 4px 4px rgba(0, 0, 0, 0.3);
          }
        }
        .out_msg_bg {
          padding: 25px 7px;
          margin-top: 25px;
          background: #1d1f22;
          height: 310px;
          overflow-y: scroll;
        }
        .out_msg_bg_h {
          height: 590px;
        }
        .msg_bg {
          background: #000000;
          border-radius: 4px 4px 4px 4px;
          opacity: 0.7;
          padding: 10px 0 17px 17px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-style: normal;
          text-transform: none;
          font-weight: 400;
          justify-content: center;
          .info {
            color: #efe28b;
          }
          .msg {
            color: #ffffff;
          }
        }
        .msg_bg:not(:last-child) {
          margin-bottom: 15px;
        }
        .msg_bg:last-child {
          margin-bottom: 73px;
        }
      }
      // 右边下面
      .right_down {
        position: relative;
        .img_box {
          display: flex;
          align-items: center;
          padding: 10px 6px;
          box-sizing: border-box;
          background: #282c2f;
          border-radius: 8px 8px 0px 0px;
          .imgs {
            width: 34px;
            height: 34px;
            margin-right: 2px;
            // box-sizing: border-box;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #939596;
            font-style: normal;
            text-transform: none;
          }
        }
        .btn_box {
          // position: relative;

          position: absolute;
          right: 13px;
          bottom: 19px;
          .btn:first-child {
            // width: 69px;
            // height: 30px;
            padding: 10px;
            background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
            border-radius: 50px 50px 50px 50px;
            margin-right: 5px;
          }
          .btn:last-child {
            // width: 69px;
            // height: 30px;
            padding: 9px 22px;

            background: #45484b;
            border-radius: 50px 50px 50px 50px;
          }
        }
        :deep(.el-textarea__inner) {
          background-color: #1d1f22;
          border-radius: 0px 0px 8px 8px;
          box-shadow: none;
          width: 100%;
          // height: 124px;
          color: #ffffff;
        }
      }
    }
    // 左边
    .left {
      display: flex;
      flex-direction: column;
      padding: 18px 10px 0 0;
      .left_up_out {
        .micro {
          // margin-left: 20px;
          justify-content: center;
          padding: 10px 0;
          // position: absolute;
          display: flex;
          // bottom: 20px;
          // left: 98px;
          .btn {
            padding: 5px 15px;
            background: #895cf8;
            border-radius: 50px 50px 50px 50px;
          }
          .btn:first-child {
            margin-right: 19px;
          }
          .btn:active {
            box-shadow: 0 0 4px 4px rgb(137, 92, 248, 0.5);
          }
        }
      }
      .left_up {
        padding-left: 11px;
        // padding-bottom: 63px;
        box-sizing: border-box;
        // position: relative;//
        // flex: 1;

        display: flex;
        justify-content: space-between;
        .left_up_left {
          display: flex;
          .img_box {
            width: 87px;
            height: 87px;
            img {
              width: 100%;
              height: 100%;
            }
            // background: orange;
            border-radius: 50%;
          }
          .info {
            padding: 7px 11px;
            box-sizing: border-box;

            font-style: normal;
            text-transform: none;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            .name {
              margin-bottom: 18px;

              font-size: 18px;
            }
            .id {
              font-size: 14px;
              color: #a7a6ab;
            }
          }
        }
        .left_up_right {
          margin-top: 47px;
          .sorts {
            padding: 2px;
            display: flex;
            padding: 0 11px;
            box-sizing: border-box;
            background: #393d3f;
            border-radius: 50px 50px 50px 50px;
          }
          .sort_name {
            line-height: 26px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            font-style: normal;
            text-transform: none;
          }
          .sorts:not(:last-child) {
            margin-bottom: 13px;
          }
          .img_box {
            width: 27px;
            height: 26px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .img_box:first-child {
            margin-right: 5px;
          }
          .img_box:last-child {
            margin-right: 14px;
          }
        }
      }
      .left_down {
        display: flex;
        flex-direction: column;
        height: calc(100% - 161px);
        .lists {
          width: 100%;
          display: flex;
          background: #282c2f;
          border-radius: 0px 10px 0px 0px;
          .item {
            text-align: center;
            padding: 15px 0;
            // flex: 1;
            width: 25%;
            box-sizing: border-box;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            font-style: normal;
            text-transform: none;
          }
          .active_tab {
            color: #895cf8;
          }
        }
        .overflow_box {
          overflow-y: auto;
          flex: 1;
          padding: 0 10px;
        }
        .isSelec {
          // box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.3) !important;
        }
        .item_content:hover {
          box-shadow: 0 1px 4px 5px rgba(0, 0, 0, 0.3);
          transform: scale(1.02);
          transition: all 1s ease;
          position: relative;
          z-index: 99;
          box-shadow: 1px 1px 4px 4px rgb(181, 109, 239, 0.8);
        }
        .item_content:first-child {
          margin-top: 10px;
        }
        .item_content {
          padding: 15px 10px;
          box-sizing: border-box;
          // flex: 1;

          .avatar {
            width: 60px;
            height: 60px;
            background: #ffffff;
            border-radius: 50%;
            position: relative;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
            .muted_avatar {
              position: absolute;
              bottom: -6px;
              right: -4px;
              width: 25px;
              height: 25px;
            }
          }
          .info {
            padding: 8px 9px;
            .icons_sort {
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
  #danmu {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgb(64, 10, 211);
    box-sizing: border-box;
  }
}
</style>
